<template>
	<view>
		<b-navigator :active-index="activeIndex"></b-navigator>
		<view class="main">
			<match-media :min-width="768">
				<el-form ref="organizationRef" :model="form" label-width="120" style="min-width: 30%;">
					<el-form-item label="选择区域" prop="streetId">
						<el-cascader
				        v-model="form.streetId"
				        :options="options"
				        :props="props"
						style="width: 100%"
						@change="streetChange"/>
					</el-form-item>
				</el-form>
			</match-media>
			<match-media :max-width="768">
				
			</match-media>
		</view>
		<view class="main">
			 <div id="container"></div>
			 <div class="input-card">
				 <view style="padding: 8px; display: flex; justify-content: flex-start;" v-for="(item, index) in list" key='index'>
					  <image :src="item.avatar" style="width: 18px; height: 18px;"></image>
					  <text>{{ item.name }}</text>
				 </view>
				
			 </div>
		</view>
		<b-footer></b-footer>
	</view>
</template>

<script>
	import bNavigator from '../../components/b-navigator.vue'
	import bFooter from '../../components/b-footer.vue'
	import AMapLoader from '@amap/amap-jsapi-loader';
	import { getDicts, organList } from '../../config/api';
	import { baseUrl } from '../../config/config'

	export default {
		components: { bNavigator, bFooter },
		data() {
			return {
				activeIndex: '/pages/organ/mapView',
				form: {
					street: [1,2,3,4]
				},
				options: [{
				    id: 1,
				    name: '山东省',
				    children: [{
				      id: 2,
				      name: '潍坊市',
				      children: [{
				        id: 3,
				        name: '青州市',
				        children: [{
				          id: 4,
				          name: '青州街道',
				        }]
				      }]
				    }]
				  }],
				props: {
				      value: 'id',
				      label: 'name',
				      children: 'children'
				},
				map: null,
				list: [{name:'养老机构'}],
				organList: [],
				baseUrl: baseUrl.slice(0,baseUrl.length-1)
				
			}
		},
		
		  onLoad() {
			  this.getDictData()
			 // this.getOrganList()
			  this.initAMap();
		  },
		  unmounted() {
		    this.map?.destroy();
		  },
		  methods: {
			  getDictData() {
			  	getDicts('yl_organization_type').then(res => {
			  		this.list = res.data.map(p => ({ name: p.dictLabel, value: p.dictValue}))
					this.list.forEach(item => {
						if(item.value == '1') {
							item.avatar = '../../static/1.png'
						}else if(item.value == '2') {
							item.avatar = '../../static/2.png'
						}else if(item.value == '3') {
							item.avatar = '../../static/3.png'
						}else if(item.value == '4') {
							item.avatar = '../../static/4.png'
						}else if(item.value == '5') {
							item.avatar = '../../static/5.png'
						}else if(item.value == '6') {
							item.avatar = '../../static/6.png'
						}
					})
					console.log(this.list)
			  	})
			  },
			  streetChange() {
			  	this.getOrganList()
			  },
			  getOrganList() {
				  const Params = {
				  	pageNum: 1,
				  	pageSize: 99,
					streetId: this.form.street[this.form.street.length - 1]
				  }
				  organList(Params).then(res =>{
				  		this.organList = res.rows
						this.organList.forEach(item => {
							if(item.type == '1') {
								item.avatar = '../../static/1.png'
							}else if(item.type == '2') {
								item.avatar = '../../static/2.png'
							}else if(item.type == '3') {
								item.avatar = '../../static/3.png'
							}else if(item.type == '4') {
								item.avatar = '../../static/4.png'
							}else if(item.type == '5') {
								item.avatar = '../../static/5.png'
							}
						})
				  })
			  },
		    initAMap() {
				const _this = this
		      window._AMapSecurityConfig = {
		        securityJsCode: "2750a7d516abf30b6f7d4acf4f0caa2c",
		      };
		      AMapLoader.load({
		        key: "f7aa84df1f3891938473e61f093f4799", // 申请好的Web端开发者Key，首次调用 load 时必填
		        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		        plugins: ["AMap.Scale", 'AMap.Geocoder', 'AMap.Marker','AMap.CitySearch'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
		      })
		        .then((AMap) => {
		          _this.map = new AMap.Map("container", {
		            // 设置地图容器id
		            viewMode: "3D", // 是否为3D地图模式
		            zoom: 13, // 初始化地图级别
		            center: [118.511411,36.698113], // 初始化地图中心点位置 潍坊市青州市青州市站
		          });
				  // // 根据定位显示当前城市
				  //     AMap.plugin('AMap.CitySearch', function () {
				  //       var citySearch = new AMap.CitySearch()
				  //       citySearch.getLocalCity(function (status, result) {
				  //         if (status === 'complete' && result.info === 'OK') {
				  //           // 查询成功，result即为当前所在城市信息
				  //           var cityinfo = result.city;
				  //           var citybounds = result.bounds;
				  //           //地图显示当前城市
				  //           _this.map.setBounds(citybounds);
				  //         }
				  //       })
				  //     })
					  const Params = {
					  	pageNum: 1,
					  	pageSize: 99,
					  	streetId: _this.form.street[_this.form.street.length - 1]
					  }
					 const markerList = []
					  organList(Params).then(res =>{
					  		_this.organList = res.rows
					  		_this.organList.forEach(item => {
					  		if(item.type == '1') {
					  			item.avatar = '../../static/1.png'
					  		}else if(item.type == '2') {
					  			item.avatar = '../../static/2.png'
					  		}else if(item.type == '3') {
					  			item.avatar = '../../static/3.png'
					  		}else if(item.type == '4') {
					  			item.avatar = '../../static/4.png'
					  		}else if(item.type == '5') {
					  			item.avatar = '../../static/5.png'
					  		}
					  	})
						
						console.log(_this.organList, 'this.organList')
						_this.organList.forEach(item => {
								var avatar = item.avatar
								const marker = new AMap.Marker({
									position: [item.lon, item.lat],
									offset: new AMap.Pixel(15, 15),
									content: `<div><img style="width: 20px; height: 20px;" src=${avatar} /></div>`,
									});
												 
												  
								let warnInfoHtml = `<div class="warnInfo">
												              
									<div class="warnmsg" style='width: 100%;line-height: 26px;display: flex !important; padding: 8px 0 10px 10px;'>
										<div><img style="width: 120px; height: 120px;" src=${baseUrl.slice(0,baseUrl.length-1) + item.imgUrl} /></div>
										<div class="warnmsg-right" style='display: flex;flex-direction: column;padding-left: 15px;line-height: 60rpx;'>
										<div><span class="wtitle"></span><span class="wtext" style='font-weight: bold;'>${item.name.slice(0,8)}</span></div>
										<div><span class="wtitle"></span><span class="wtext">地址：${item.address}</span></div>
										<div><span class="wtitle"></span><span class="wtext">电话：${item.concatPhone}</span></div>
										<div><span class="wtitle"></span><span class="wtext"><span style='color: red'>￥</span>${item.price}</span></div>
										
										</div>
									<div>
								</div>`
															
													
												         
								let warnInfoWindow = new AMap.InfoWindow({
												    // isCustom: true,  //使用自定义窗体
													content: warnInfoHtml,
												    offset: new AMap.Pixel(16, -25)
												    });
								marker.on('click', function () {
									warnInfoWindow.open(_this.map, marker.getPosition());
																
									});
															 
								//将创建的点标记添加到已有的地图实例：
								markerList.push(marker);
								
								console.log(markerList, 'this.markerList')
												  
						})
						_this.map.add(markerList);
						})
				
					
					
					  
					
					  
		        })
		        .catch((e) => {
		          console.log(e);
		        });
		    }
			
		  },
	}
</script>

<style>
  #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: .25rem;
  width: 10rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: absolute;
  bottom: 1.2rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 0.35rem;
  
}
	:deep(.warnInfo) {
	  width: 320px !important;
	  min-height: 150px !important;
	  background-color: #fff;
	  background-size: 100% 100%;
	  position: relative;
	
	   .close-btn {
	      position: absolute;
	      top: 0;
	      right: 8px;
	      padding: 3px;
	      cursor: pointer;
	      color: #000000;
	      font-size: 18px;
		  width: 8px;
	    }
	
	  :deep(.warnmsg) {
	    width: 100%;
	    line-height: 26px;
	    color: #000000;
	    padding: 8px 0 10px 10px !important;
	    box-sizing: border-box !important;
	    display: flex !important;

	
	  
	
	    :deep(.warnmsg-right) {
	      display: flex !important;
	      flex-direction: column !important;
		  padding-left: 20rpx;
		  line-height: 60rpx;
	    }
	
	    :deep(view) {
	      display: flex !important;
	      flex-direction: column !important;
		  padding-left: 20rpx;
		  line-height: 60rpx;
	
	      :deep(.wtitle) {
	        width: 15px !important;
	        text-align-last: justify !important;
	      }
	
	      :deep(.wtext) {
	         color: #606266 !important;
			 font-size: 15px;
	         flex: 1 !important;
	      }
	    }
	
	    :deep(img) {
	      width: 120px !important;
	      height:120px !important;
	      margin-right: 1px !important;
	      margin-top: 5px !important;
	    }
	  }
	}


	@media screen and (max-width: 960px) {
		.main {
			flex-direction: column;
			
		}
		
		#container{
		      padding:5px;
		      margin: 0px;
		      width: 95%;
		      height: 500px;
		  }
		  .input-card {
			  display: flex;
			  flex-direction: column;
			  min-width: 0;
			  word-wrap: break-word;
			  background-color: #fff;
			  background-clip: border-box;
			  border-radius: .25rem;
			  width: 7rem;
			  border-width: 0;
			  border-radius: 0.4rem;
			  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
			  position: absolute;
			  bottom: 1rem;
			  right: 1rem;
			  -ms-flex: 1 1 auto;
			  flex: 1 1 auto;
			  padding: 0.75rem 0.35rem;
		  }
		  
		  :deep(.warnInfo) {
		    width: 350px !important;
		    min-height: 100px !important;
		    background-color: #ffffff;
		    background-size: 100% 100%;
		    position: relative !important;
		  
		     .close-btn {
		        position: absolute;
		        top: 0;
		        right: 8px;
		        padding: 3px;
		        cursor: pointer;
		        color: #ffffff;
		        font-size: 18px;
		      }
		  
		    :deep(.warnmsg) {
		      width: 100%;
		      line-height: 26px !important;
			   color: #000000;
		      padding: 8px 0 10px 10px;
		      box-sizing: border-box !important;
		      display: flex !important;
		  
		  
		      .warnmsg-left {}
		  
		      :deep(.warnmsg-right) {
		       
		      }
		  
		      :deep(view) {
		        display: flex !important;
		        flex-direction: column !important;
				padding-left: 20rpx;
				line-height: 60rpx;
		  
		        :deep(.wtitle ){
		          width: 10px !important;
		          text-align-last: justify!important;
		        }
		  
		        :deep(.wtext) {
		          color: #606266 !important;
				  font-size: 12px;
		           flex: 1 !important;
		        }
		      }
		  
		      :deep(img) {
		        width: 60px;
		        height:60px;
		        margin-right: 1px;
		        margin-top: 5px;
		      }
		    }
		  }
}
</style>
